<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影院</title>
</head>
<body>
    <div id = 'myBtn'>按钮</div>
    <div id = 'root'></div>
    <script>
        //生成电影列表
        function createList(){
            var list = [];
            for(var i = 0;i<10;i++){
                var movieObj={
                    title:'粉墨江湖',
                    type:'戏曲',
                    score:9.9,
                    playTime:['08:00','12:00','16:30']
                }
                list[i] = movieObj;
            }
            return list;
        }
        function Play(title){
            alert(`正在播放${title}......`)
        }
        //在页面中实际生成
        function renderList(){
            var list = createList();
            var str = ''
            for(var i=0;i<list.length;i++){
                if (i===0){
                    str += '<ul>'
                    // str = str +<ul>
                }
                var temp = ''
                temp +=`<li>电影：${list[i].title}，
                    类型:${list[i].type},评分：${list[i].score}
                    <input type='button' value='播放' onclick="play('${list[i].title}')">
                    </li>`;
                str += temp;
                if(i===list.length - 1){
                    str += '</ul>'
                }
            }
            document.getElementById('root').innerHTML =str
        }
        document.getElementById('myBtn').onclick = renderList;
    </script>
</body>
</html> 